<!-- ZmButton -->
<template>
  <el-button :type="getType" :icon="getIcon" v-bind="$attrs" v-on="$listeners" :size="size">
    <slot>
      <span v-if="t">{{custtxt || types[t].txt}}</span>
    </slot>
  </el-button>
</template>

<script>

export default {
  name: 'ZmButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'mini'
    },
    icon: String,
    t: {
      type: String,
      validator (v) {
        return ['add', 'del', 'edit', 'search', 'submit', 'reset'].includes(v)
      }
    },
    // 自定义text
    custtxt: {
      type: String,
      default: ''
    }

  },
  data () {
    return {
      types: {
        add: { txt: '新增', type: 'success', icon: 'el-icon-circle-plus-outline' },
        edit: { txt: '编辑', type: 'primary', icon: 'el-icon-edit' },
        search: { txt: '查询', type: 'primary', icon: 'el-icon-search' },
        del: { txt: '删除', type: 'danger', icon: 'el-icon-delete' },
        submit: { txt: '提交', type: 'primary' },
        reset: { txt: '重置', type: 'info' }
      }

    }
  },
  computed: {
    getType () {
      const t = this.t
      if (!t) { return this.type }
      return this.types[t].type
    },
    getIcon () {
      const t = this.t
      if (!t) { return this.icon }
      return this.types[t].icon
    }
  },
  methods: {
    // 初始化方法
    init () { }
  }
}

</script>
<style lang='scss' scoped>
</style>
